<script setup lang="ts">

</script>

<template>
  <div class="w-100vw flex items-center justify-center p-y-20rpx">--------unocss 图标----------</div>
  <div class="flex justify-center gap-3 text-5xl text-blue-900">
    <!-- 类目最前面加 i-  -->
    <!-- 写法一：图标库名称 + : + 图标名称 -->
    <i class="i-ant-design:compass-twotone" />
    <!-- 写法二：图标库名称 + - + 图标名称 -->
    <i class="i-ant-design-console-sql-outlined" />
  </div>
  <div class="w-100vw flex items-center justify-center p-y-20rpx">--------传统图标----------</div>
  <div class="flex items-center justify-center gap-3">
    <img class="h-100rpx w-100rpx" src="https://api.iconify.design/uiw:github.svg?color=%23faa5a2">
    <img class="h-100rpx w-100rpx" src="https://api.iconify.design/uiw:html5.svg?color=%23faa5a2">
  </div>
</template>

<style scoped lang="scss">

</style>
